
<script lang="ts" setup>
import MusicRadio from '@/views/Discover/components/MusicRadio.vue'
import LivingChannel from '@/views/Discover/components/LivingChannel.vue'
import { ref } from 'vue'
import type { RecommendCate } from '@/types/Recommend'
import Recommend from '@/views/Discover/components/Recommend.vue'
import router from '@/router/index'
const musicRadioItem = (item: string) => {
  console.log(item)
}
const active = ref(0)
const imgUrl = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202105%2F23%2F20210523112011_249a0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708757368&t=4028335210750e147477e459c1086750'
const cateList:RecommendCate[] = [
  {cateIdx: 0,  cateStr: '每日推荐' ,imgPath:imgUrl},
  {cateIdx: 1,  cateStr: '流行' ,imgPath:imgUrl},
  {cateIdx: 2,  cateStr: '华语' ,imgPath:imgUrl},
  {cateIdx: 3,  cateStr: '欧美' ,imgPath:imgUrl},
  {cateIdx: 4,  cateStr: '国风' ,imgPath:imgUrl},
  {cateIdx: 5,  cateStr: '民谣' ,imgPath:imgUrl},
  {cateIdx: 6,  cateStr: '摇滚' ,imgPath:imgUrl},
  {cateIdx: 7,  cateStr: '说唱' ,imgPath:imgUrl},
  {cateIdx: 8,  cateStr: '电子' ,imgPath:imgUrl},
  {cateIdx: 9,  cateStr: 'R&B' ,imgPath:imgUrl},
  {cateIdx: 10, cateStr: '治愈' ,imgPath:imgUrl},
  {cateIdx: 11, cateStr: '睡前' ,imgPath:imgUrl},
  {cateIdx: 12, cateStr: '学习' ,imgPath:imgUrl},
]
const selectCate = ref<RecommendCate>(cateList[0])
const onClickTab = (item:any)=>{
  selectCate.value = cateList[item.name]
}
const onSearch = ()=>{
  console.log('search')
  router.push({path:'/search'})
}
</script>
<template>
  <!-- 吸顶的nav -->
  <van-sticky :offset-top="0">
    <div class="nav">
      <span class="title">发现</span>
      <van-icon name="search" class="search" @click="onSearch"/>
    </div>
  </van-sticky>

  <div class="main">

    <!-- 音乐电台 -->
    <MusicRadio @on-click-item="musicRadioItem" />

    <!-- 正在直播 -->
    <LivingChannel />

    <!-- 歌单漫游 -->
    <div class="singles-roaming"> 歌单漫游 </div>

    <!-- 吸顶分类 设置了吸顶，那么内容就不能滚动了-->
    <van-sticky :offset-top="`10vh`">
      <van-tabs v-model:active="active" 
      swipeable background="transparent" 
      title-active-color="#fff"
      title-inactive-color="#a0a0a0"
      line-width="3vw"
      color="#fff"
      @click-tab="onClickTab"
      >
        <van-tab v-for="item in cateList" 
        :title="item.cateStr" 
        :key="item.cateIdx" 
        title-style="font-size:17px;" >
          
        </van-tab>
    </van-tabs>

    </van-sticky>

    <Recommend :cate="selectCate!" class="list"/>
   
  </div>
</template>

<style lang="scss" scoped>
.nav {
  background-color: transparent;
  width: 100%;
  height: 10vh;
  position: relative;
  /* 使 .container 成为定位上下文 */
}

.title {
  font-size: 6vw;
  line-height: 10vw;
  color: white;
  background-color: transparent;
  position: absolute;
  bottom: 0;
  left: 4vw;
}

.search {
  color: #fff;
  font-size: 6vw;
  line-height: 10vw;
  background-color: transparent;
  position: absolute;
  bottom: 0;
  right: 4vw;
}

.main {
  width: 100vw;
  display: flex;
  flex-direction: column;

  /* 设置选中状态下的下划线颜色 */

}

.singles-roaming {
  margin-top: 4vw;
  font-size: 6vw;
  line-height: 10vw;
  color: white;
  background-color: transparent;
  padding-left: 4vw;
}

.list {
  width: 100vw;
}

</style>

